import React, { Component } from 'react'
import { NavBar } from 'antd-mobile';
import SearchInput from '../searchInput/SearchInput'
import "./index.css"
import myaxios from '../../utils/myaxios'
import { Carousel } from 'antd-mobile';
import { withRouter } from "react-router-dom"
import { Flex, WhiteSpace } from 'antd-mobile';

class index extends Component {
    state = {
        swiper_list: [],
        catitems : [],
        goods_list : []
    }

    // 轮播图点击事件
    handleSwiperClick = (goods_id) => {
        this.props.history.push("./goodDetail/"+goods_id)
    }
    

    // 导航图片的点击事件
    handleClick = (params) => {
        this.props.history.push("/category")
    }
    
    // 商品跳转列表点击事件
    handleImgClick = (params) => {
        this.props.history.push("/goodslist")
    }
    

    componentDidMount() {
        // 轮播图的数据请求
        myaxios.get("home/swiperdata").then(res => {
            // console.log(res)
            this.setState({
                swiper_list: res,
                imgHeight:170
            })
        })
        // 分类列表的数据请求
        myaxios.get("/home/catitems").then(res => {
            // console.log(res)
            this.setState({
                catitems:res
            })
        })
        // 商品列表的数据请求
        myaxios.get("/home/floordata").then(res =>{
            console.log(res)
            this.setState({
                goods_list:res
            })
        })
    }



    render() {
        return (
            <div className="yg-index">
                {/* 头部开始 */}
                <div className="index-nav">
                    <NavBar className="index-nav-title">优购商城</NavBar>
                </div>
                {/* 头部结束 */}
                {/* 搜索框开始 */}
                <div className="index-seach">
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索框结束 */}
                {/* 轮播图开始 */}
                <div className="index-swiper">
                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {this.state.swiper_list.map(val => (
                            <div
                                onClick={this.handleSwiperClick.bind(this,val.goods_id)}
                                key={val.goods_id}
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div> 
                {/* 轮播图结束*/}
                {/* 分类开始 */}
                <dir className="index-catitems">
                    <div className="catitems-item">
                        <Flex>
                            {
                                this.state.catitems.map(v=>{
                                    return <Flex.Item key={v.image_src} onClick={this.handleClick}>
                                        <img src={v.image_src} alt=""/>
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </dir>
                {/* 分类结束 */}
                {/* 图片列表开始 */}
                <div className="index-goods_list">
                        {
                            this.state.goods_list.map(v=>{
                                return <div key={v.floor_title.image_src} className="goods_list-item">
                                    {/* 标题开始 */}
                                    <div className="product-title">
                                        <img src={v.floor_title.image_src} alt=""/>
                                    </div>
                                    {/* 标题结束 */}
                                    {/* 图片列表的开始 */}
                                    <div className="product-list">
                                        {
                                            v.product_list.map(vv=>{
                                                return <div className="product-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                                    <img src={vv.image_src} alt=""/>
                                                </div>
                                            })
                                        }
                                    </div>
                                    {/* 图片列表的结束 */}
                                </div>
                            })
                        }
                </div>
                {/* 图片列表结束 */}
            </div>
        )
    }
}

export default withRouter(index)